<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 分类 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类</title>
    <link rel="stylesheet" href="./css/classification.css">
    <link rel="stylesheet" href="./css/_reset.css">
</head>
<body>
    <div class="whole">
        <!-- 头部 -->
        <header>
            <!-- 返回按钮 -->
            <div class="back">Back</div>
            分类
            <!-- 选择地区 -->
            <select class="region">
                <option value="gaungzhou">广州市</option>
                <option value="shenzhen">深圳市</option>
            </select>
        </header>
        <!-- 主要内容 -->
        <main>
            <!-- 分类集合 -->
            <div class="gather">
                <!-- 图文 -->
                <ul class="chart_font">
                    <li><img src="./images/分类1.png" alt="">美食</li>
                    <li><img src="./images/分类2.png" alt="">电影</li>
                    <li><img src="./images/分类3.png" alt="">运动</li>
                    <li><img src="./images/分类4.png" alt="">唱歌</li>
                </ul>
                <!-- 小点 -->
                <ul class="dot">
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <!-- 美食分类内容 -->
            <div class="gather_content">
                <!-- 头部 -->
                <div class="gather_title">
                    <div class="left">
                        <img src="./images/美食类.png" alt="">
                        <span>美食类</span>
                    </div>
                    <div class="right">
                        <span>更多</span>
                        <img src="./images/更多.png" alt="">
                    </div>
                </div>
                <div class="content_img">
                    <img src="./images/美食1.png" alt="">
                    <img src="./images/美食2.png" alt="">
                    <img src="./images/美食3.png" alt="">
                    <img src="./images/美食4.png" alt="">
                </div>
            </div>
            <!-- 运动分类内容 -->
            <div class="gather_content">
                <!-- 头部 -->
                <div class="gather_title">
                    <div class="left">
                        <img src="./images/运动类.png" alt="">
                        <span>运动类</span>
                    </div>
                    <div class="right">
                        <span>更多</span>
                        <img src="./images/更多.png" alt="">
                    </div>
                </div>
                <div class="content_img">
                    <img src="./images/运动1.png" alt="">
                    <img src="./images/运动2.png" alt="">
                    <img src="./images/运动3.png" alt="">
                    <img src="./images/运动4.png" alt="">
                </div>
            </div>
            <!-- 电影分类内容 -->
            <div class="gather_content">
                <!-- 头部 -->
                <div class="gather_title">
                    <div class="left">
                        <img src="./images/电影类.png" alt="">
                        <span>电影类</span>
                    </div>
                    <div class="right">
                        <span>更多</span>
                        <img src="./images/更多.png" alt="">
                    </div>
                </div>
                <div class="content_img">
                    <img src="./images/电影1.png" alt="">
                    <img src="./images/电影2.png" alt="">
                    <img src="./images/电影1.png" alt="">
                    <img src="./images/电影2.png" alt="">
                </div>
            </div>
        </main>
        <!-- 尾部 -->
        <footer>
            <div class="navlist">
                <a href="./index.html">
                    <div class="home">
                        <img src="./images/首页.png" alt="">
                    首页
                    </div>
                </a>
                <a href="./classification.html">
                    <div class="classification active">
                        <img src="./images/分类ing.png" alt="">
                        分类
                    </div>
                </a>
                <a href="./find.html">
                    <div class="find">
                        <img src="./images/发现.png" alt="">
                        发现
                    </div>
                </a>
                <a href="./my.html">
                    <div class="my">
                        <img src="./images/我的.png" alt="">
                        我的
                    </div>
                </a>
            </div>
        </footer>
    </div>
</body>
</html>